<template>
	<view style="background-color: #fff;padding: 24rpx">
		<view class="header">
			<u-search class="input-flex" :value="searchKey" @change="handleSearchChange" :searchIconSize="26" placeholder="请输入活动名称" bg-color="#f2f2f2" :showAction="false"></u-search>
			<view class="search-btn" @click="resetFetchActiveList">搜索</view>
		</view>
	</view>
	<u-sticky bg-color="#fff">
		<u-tabs
			:list="tabList"
			lineWidth="60"
			lineColor="#ffb803"
			itemStyle="width: 50%;padding: 0;margin: 0;height: 45px;"
			:current="currentIndex"
			@change="handleTabsChange"
		></u-tabs>
	</u-sticky>

	<view class="active-list" v-if="currentIndex === 0">
		<view class="empty" v-if="myPlay.length === 0">
			<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
			<view class="empty-text">暂无数据～</view>
		</view>

		<view class="active-list-item" v-for="item in myPlay" :key="item.id" :class=" item.officeUser && item.coverPic ? 'active-spec' : ''">
			<image class="active-cover" v-if="item.officeUser && item.coverPic" :src="item.coverPic"></image>
			<view class="active-tag" v-if="item.status === 10 ">活动中</view>
			<view class="active-tag active" v-if="item.status === 20 ">已截止</view>
			<view class="active-tag active" v-if="item.status === 30 ">已截止</view>
			<view class="active-tag active" v-if="item.status === 40 ">已结束</view>
			<view class="active-tag active" v-if="item.status === 50 ">已取消</view>
			<view class="active-item-top" @click="handleApply(item.id)">
				<image class="active-item-header" mode="aspectFill" :src="item.picFirst"></image>
				<view class="active-item-right">
					<view class="active-item-right-text">
						<view>{{item.title}}</view>
						<text class="active-item-right-text-unit" v-if="item.chargeType===1">¥</text><text class="active-item-right-text-price">{{item.priceShow}}</text>
					</view>
					<view>
						<tui-tag style="margin-right: 12rpx;" backgroundColor="#FFFFE6" color="#999" shape="circle">
		          <image style="width: 26rpx;height: 26rpx;margin-right: 4rpx;" :src="item.categoryIcon"></image>
		          <text class="tab-item-text">{{item.categoryName}}</text>
		        </tui-tag>
						<tui-tag style="margin-right: 12rpx;" backgroundColor="#FAE7DC" color="#F28C54" type="" shape="circle" v-if="item.discountType == 1">
							<image style="width: 1rpx;height: 26rpx;;"></image>
							女生优惠
						</tui-tag>
						<tui-tag style="margin-right: 12rpx;" backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="item.payWay == 1" >
							<image style="width: 1rpx;height: 26rpx;;"></image>
							线上支付
						</tui-tag>
						<tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="item.payWay == 2" >
							<image style="width: 1rpx;height: 26rpx;;"></image>
							线下收费
						</tui-tag>
					</view>
					<view class="active-addr">
						<tui-icon name="gps" size="12" :color="item.officeUser && item.coverPic ? '#fff' : '#666'"></tui-icon>
						<text v-if="item.distanceShow">&nbsp;{{item.distanceShow}} &nbsp;|&nbsp;</text>
						<view>&nbsp;{{item.locationName}}</view>
					</view>
					<view class="active-time">
						<tui-icon name="time" size="12" :color="item.officeUser && item.coverPic ? '#fff' : '#666'"></tui-icon>
						<text>&nbsp;{{item.dateShow}}</text>
					</view>
		      <view class="active-shop">
		        <image :src="item.userHeadPic"></image>&nbsp;
		        <text>{{ item.userName }}</text>
		      </view>
				</view>
			</view>
			<view class="active-item-btm">
			  <u-button v-if="item.payWay == 1 && item.signUpStatus === 2 && !item.settleDate" customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;margin-right: 20rpx;" color="#1c1c1e" text="确定" @click="commitUserActivitySignUpFee(item.id)"></u-button>
			  <u-button v-if="item.payWay == 1 && item.settleDate" customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;margin-right: 20rpx;background-color: #aaa;" color="#fff" text="已确认"></u-button>

        <u-button v-if="item.signUpStatus === 2 && !item.settleDate" customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;" color="#1c1c1e" text="取消报名" @click="userCancelSignUpActivity(item.id)"></u-button>
			  <u-button v-if="item.signUpStatus === 3" customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;background-color: #aaa;" color="#fff" text="已取消"></u-button>
			</view>
		</view>
    <u-modal :show="querenShowModal" title="提示" content='确认后报名费将直接转入组织者账户，为了保证你的权益，请确认到达活动现场无误后再确认完成!' confirmText="确认" cancelText="取消" :showCancelButton="true" confirmColor="#F73D00" @confirm="sureQuerenConfirm" @cancel="querenShowModal = false"></u-modal>
    <u-modal :show="quxiaobaomingShowModal" title="提示" content='取消报名后不可再次报名 如有费用将自动退费，确认吗？' confirmText="确认" cancelText="取消" :showCancelButton="true" confirmColor="#F73D00" @confirm="sureQuxiaobaomingConfirm" @cancel="quxiaobaomingShowModal = false"></u-modal>
  </view>
	<view class="active-list" v-if="currentIndex === 1">
		<view class="empty" v-if="myCreate.length === 0">
			<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
			<view class="empty-text">暂无数据～</view>
		</view>

		<view class="active-list-item" v-for="item in myCreate" :key="item.id" :class=" item.officeUser && item.coverPic ? 'active-spec' : ''">
			<image class="active-cover" v-if="item.officeUser && item.coverPic" :src="item.coverPic"></image>
			<view class="active-tag" v-if="item.status === 10 ">活动中</view>
			<view class="active-tag active" v-if="item.status === 20 ">已截止</view>
			<view class="active-tag active" v-if="item.status === 30 ">已截止</view>
			<view class="active-tag active" v-if="item.status === 40 ">已结束</view>
			<view class="active-tag active" v-if="item.status === 50 ">已取消</view>
			<view class="active-item-top" @click="handleApply(item.id)">
				<image class="active-item-header" mode="aspectFill" :src="item.picFirst"></image>
				<view class="active-item-right">
					<view class="active-item-right-text">
						<view>{{item.title}}</view>
						<text class="active-item-right-text-unit" v-if="item.chargeType===1">¥</text><text class="active-item-right-text-price">{{item.priceShow}}</text>
					</view>
					<view>
						<tui-tag style="margin-right: 12rpx;" backgroundColor="#FFFFE6" color="#999" shape="circle">
		          <image style="width: 26rpx;height: 26rpx;margin-right: 4rpx;" :src="item.categoryIcon"></image>
		          <text class="tab-item-text">{{item.categoryName}}</text>
		        </tui-tag>
						<tui-tag style="margin-right: 12rpx;" backgroundColor="#FAE7DC" color="#F28C54" type="" shape="circle" v-if="item.discountType == 1">
							<image style="width: 1rpx;height: 26rpx;;"></image>
							女生优惠
						</tui-tag>
						<tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="item.payWay == 1" >
							<image style="width: 1rpx;height: 26rpx;;"></image>
							线上支付
						</tui-tag>
						<tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="item.payWay == 2" >
							<image style="width: 1rpx;height: 26rpx;;"></image>
							线下收费
						</tui-tag>
					</view>
					<view class="active-addr">
						<tui-icon name="gps" size="12" :color="item.officeUser && item.coverPic ? '#fff' : '#666'"></tui-icon>
						<text v-if="item.distanceShow">&nbsp;{{item.distanceShow}} &nbsp;|&nbsp;</text>
						<view>&nbsp;{{item.locationName}}</view>
					</view>
					<view class="active-time">
						<tui-icon name="time" size="12" :color="item.officeUser && item.coverPic ? '#fff' : '#666'"></tui-icon>
						<text>&nbsp;{{item.dateShow}}</text>
					</view>
		      <view class="active-shop">
		        <image :src="item.userHeadPic"></image>&nbsp;
		        <text>{{ item.userName }}</text>
		      </view>
				</view>
			</view>
			<view class="active-item-btm">
			  <u-button v-if="item.status !== 50" customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;" color="#1c1c1e" text="取消活动" @click="cancelActivity(item.id)"></u-button>
			  <u-button v-if="item.status === 50" customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;background-color: #aaa;" color="#fff" text="已取消"></u-button>
				<u-button v-if="item.status === 10" customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;margin-left: 20rpx;" color="#1c1c1e" text="编辑活动" @click="editActivity(item.id)"></u-button>
			</view>
		</view>
    <u-modal :show="quxiaohuodongShowModal" title="提示" content='取消活动后，用户支付的费用将自动退费，确认取消吗' confirmText="确认" cancelText="取消" :showCancelButton="true" confirmColor="#F73D00" @confirm="sureQuxiaohuodongConfirm" @cancel="quxiaohuodongShowModal = false"></u-modal>
  </view>
</template>

<script>
import {getUserSignupActivityPage, getUserCreateActivityPage, cancelActivity, userCancelSignUpActivity, commitUserActivitySignUpFee} from '../../config/api.js';
	import { to } from '../../config/utils.js';

	export default {
		data() {
			return {
        querenShowModal: false,
        quxiaobaomingShowModal: false,
        quxiaohuodongShowModal: false,
        activityId: null,
				currentIndex: 0,
				isLoading: false,
				hasMore: true,
				pages: 1,
				size: 10,
        searchKey: "",
				myPlay: [],
				myCreate: [],
				tabList: [
					{
						name: '我参与的'
					}, {
						name: '我发布的'
					}
				]
			}
		},
		onReady() {
			this.fetchMyJoined();
		},
		onReachBottom() {
			if(this.loading || !this.hasMore) return;
			
			this.pages = this.pages + 1;
			this.getUserActivityPageBySearch();
		},
		onPullDownRefresh() {
			this.resetFetchActiveList();
		},
		methods: {
      async sureQuerenConfirm(){
        this.querenShowModal = false;
        const [err, data] = await to(commitUserActivitySignUpFee({activityId:this.activityId}));
        if(err) {
          return uni.showToast({
            title: err?.msg || '确认费用失败',
            icon: 'none'
          })
        }
        if(data.success) {
          this.resetFetchActiveList();
        }
      },
      async sureQuxiaobaomingConfirm(){
        this.quxiaobaomingShowModal = false;
        const [err, data] = await to(userCancelSignUpActivity({activityId: this.activityId}));
        if(err) {
          return uni.showToast({
            title: err?.msg || '取消报名失败',
            icon: 'none'
          })
        }
        if(data.success) {
          this.resetFetchActiveList();
        }
      },
      async sureQuxiaohuodongConfirm(){
        this.quxiaohuodongShowModal = false;
        const [err, data] = await to(cancelActivity({activityId: this.activityId}));
        if(err) {
          return uni.showToast({
            title: err?.msg || '取消活动失败',
            icon: 'none'
          })
        }
        if(data.success) {
          this.resetFetchActiveList();
        }
      },

			handleSearchChange(value) {
				this.searchKey = value;
			},
			resetFetchActiveList() {
				this.isLoading = false;
				this.hasMore = true;
				this.pages = 1;
				if(this.currentIndex === 0) {
					this.myPlay = [];
				} else {
					this.myCreate = [];
				}

				this.getUserActivityPageBySearch();
			},
      getUserActivityPageBySearch(){
        if(this.currentIndex === 0) {
          this.fetchMyJoined();
        } else {
          this.getMyCreate();
        }
      },
      commitUserActivitySignUpFee(activityId) {
        this.querenShowModal = true;
        this.activityId = activityId;
      },
      userCancelSignUpActivity(activityId){
        this.quxiaobaomingShowModal = true;
        this.activityId = activityId;
      },
      cancelActivity(activityId){
        this.quxiaohuodongShowModal = true;
        this.activityId = activityId;
      },
			editActivity(id) {
				uni.navigateTo({
					url: `/pages/publish/publish?id=${id}`
				})
			},
			handleTabsChange(e) {
				const { index } = e || {};
				this.currentIndex = index;

				this.resetFetchActiveList();
				// if(index === 0) {
				// 	this.fetchMyJoined();
				// } else {
				// 	this.getMyCreate();
				// }
			},
			handleApply(activityId) {
				uni.navigateTo({
					url: `/pages/detail/detail?activityId=${activityId}`
				})
			},
			async fetchMyJoined() {
				this.loading = true;
				const [err, data] = await to(getUserSignupActivityPage({current: this.pages, searchKey: this.searchKey, size: this.size}));
				this.loading = false;
				if(err) return;
				if(data.success) {
					this.myPlay = this.myPlay.concat((data?.data?.records || []).map(item => {
						return item;
					}))
				}
				
				if((data?.data?.records || []).length < this.size) {
					this.hasMore = false;
				}
			},
			async getMyCreate() {
				this.loading = true;
				const [err, data] = await to(getUserCreateActivityPage({current: this.pages, searchKey: this.searchKey, size: this.size}));
				this.loading = false;
				if(err) return;
				
				if(data.success) {
					this.myCreate = this.myCreate.concat((data?.data?.records || []).map(item => {
						return item;
					}))
				}
				
				if((data?.data?.records || []).length < this.size) {
					this.hasMore = false;
				}
			},
		}
	}
</script>

<style>
.header {
	margin-bottom: 0;
	background-color: #f2f2f2;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	padding: 12rpx 0;
}
.search-btn {
	height: 38rpx;
	padding-left: 24rpx;
	margin-right: 30rpx;
	border-left: 2rpx solid #ddd;
	font-size: 28rpx;
	color: #222;
	font-weight: bold;
}


/* 活动列表 */
.active-list {
	margin: 24rpx;
}
.active-list-item {
	padding: 44rpx 24rpx;
	border-radius: 18rpx;
	background-color: #fff;
	overflow: hidden;
	margin-bottom: 18rpx;
	overflow: hidden;
	position: relative;
}
.active-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
}
.active-spec {
	background-color: #96AE64;
}

.active-tag {
	width: 90rpx;
	height: 40rpx;
	border-bottom-right-radius: 18rpx;
	background-color: #3BFBAA;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #000;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 10;
}
.active-tag.active {
	color: #aaa;
	background-color: #f2f2f2;
}

.active-item-top {
	/* display: flex; */
	position: relative;
	z-index: 10;
}
.active-item-header {
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
	position: absolute;
	top: 0;
	left: 0;
}
.active-item-right {
	flex: 1;
	margin-left: 218rpx;
}
.active-item-right-text {
	font-size: 32rpx;
	margin-bottom: 12rpx;
	display: flex;
	justify-content: space-between;
}
.active-item-right-text view {
	flex: 1;
	color: #000;
}
.active-spec .active-item-right-text view {
	color: #fff;
}
.active-item-right-text-unit {
	font-size: 28rpx;
	color: #FFB803;
	font-weight: bold;
	margin-top: 10rpx
}
.active-item-right-text-price {
	font-size: 36rpx;
	color: #FFB803;
	font-weight: bold;
}
.active-addr {
	margin-top: 22rpx;
	margin-bottom: 24rpx;
}

.active-addr, .active-time, .active-shop {
	font-size: 24rpx;
	color: #666;
	display: flex;
	align-items: center;
}
.active-spec .active-addr, .active-spec .active-time, .active-spec .active-shop {
	color: #fff;
}

.active-addr view {
	flex: 1;
	height: 40rpx;
	margin-top: 6rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.active-shop {
	margin-top: 22rpx;
	margin-bottom: 26rpx;
}
.active-shop image {
	width: 32rpx;
	height: 32rpx;
	border-radius: 16rpx;
}
.active-shop text {}

.active-item-btm {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-top: 1rpx solid #f2f2f2;
	padding-top: 22rpx;
	position: relative;
	z-index: 10;
}
.active-spec .active-item-bm {
	color: #fff;
}
.active-item-bm {
	flex: 1;
	padding-left: 12rpx;
	font-size: 28rpx;
	color: ##FFB803;
}

.empty {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.empty-img {
	width: 150rpx;
	height: 150rpx;
	margin-top: 50rpx;
	margin-bottom: 26rpx;
}
.empty-text {
	font-size: 28rpx;
	color: #666;
}
.input-flex {
	flex: 1;
}
</style>
